Conversation
| } else { | ||
| setContractCapacityCompleted(false); | ||
| } | ||
| }; |
There was a problem hiding this comment.
複雑な状態を useState だけで管理しようとしているからですね。useReducer を使うように変更します。
| width: 100%; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: space-between; |
There was a problem hiding this comment.
ボックスの幅が小さくなっている理由
スタイルを共通化したときに、コード上の意味は変わっていないと思ってデザインの確認を怠ったことが原因です。スタイル共通化前は幅いっぱいになっていたかと思います。
プルリクエスト作成時にもデプロイをして、簡単にデザインを確認できるようにします。
指定のデザインではない理由
値がとびとびのとき、つまり単位がアンペアのときはドロップダウンリストが表示されるようになっています。ドロップダウンリストでは単位も選択肢に含まれています。
値が 1 ずつ増減する kVA では範囲が大きいこともあってキーボードで入力できるようにしています。スマホを前提とする場合こちらの方が簡単に入力できるかと思いました。
単位が入力欄からはみ出ている理由
数値だけを入力してもらうことを想定しているからです。
There was a problem hiding this comment.
プルリクエストのコードを GitHubPages だけで確認しようとするのは、かなり難しそうでした。
他のデプロイ先も含めて考えます。
kenji7157
left a comment
There was a problem hiding this comment.
フロントエンドのチャレンジ提出ありがとうございました!
faviconやダークモード対応など要求事項以外の部分の対応ありがとうございます。
simulation-form.tsxが肥大化して複雑になっているので、react-hook-fromを使用する or ロジック・コンポーネントを分割する等検討してみると良いかと思いました。
諸々コメントしましたが、可能な範囲でご確認・ご対応していただければ大丈夫です!
| '40A', | ||
| '50A', | ||
| '60A', | ||
| ]; |
There was a problem hiding this comment.
配列・オブジェクトを定数化する場合はas constをすることで、要素の書き換えも禁止することができます。
https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-4.html#const-assertions
| label='現在の電気の使用状況について教えてください' | ||
| isVisible={contractCapacityCompleted} | ||
| > | ||
| <FormWithUnit |
There was a problem hiding this comment.
最低料金があることをユーザーには通知しないということでよろしいでしょうか。
| errorMessage={contractCapacityErrorMessage} | ||
| setErrorMessage={setContractCapacityErrorMessage} | ||
| /> | ||
| <FormWithUnit |
There was a problem hiding this comment.
kVAの場合に、SelectionFormを使わなかったのはなぜでしょうか?
There was a problem hiding this comment.
値が 1 ずつ増減する kVA では範囲が大きいこともあってキーボードで入力できるようにしています。スマホを前提とする場合こちらの方がたくさんある選択肢から選ぶ必要がなく、簡単に入力できるかと思いました。
| const onInputValueChange = (inputValue: string) => { | ||
| setInputValue(inputValue); | ||
| if (!validateMailAddress(inputValue)) { | ||
| setMailAddressErrorMessage('メールアドレスを正しく入力してください'); |
There was a problem hiding this comment.
エラー文言の仕様は「メールアドレスを正しく入力してください。」になります。
There was a problem hiding this comment.
yamada.taro@sample..co.jpが許容されていますが、こちらは期待通りの挙動でしょうか?
There was a problem hiding this comment.
エラー文言の仕様は「メールアドレスを正しく入力してください。」になります。
句点の付け忘れのご指摘でしょうか。
yamada.taro@sample..co.jpが許容されていますが、こちらは期待通りの挙動でしょうか?
こちらは HTML の入力値検証で許容されていません。ただエラーメッセージが出ないので修正します。
| isVisible={isVisible} | ||
| errorMessage={errorMessage} | ||
| > | ||
| <Input |
There was a problem hiding this comment.
参考デザインのように、郵便番号を分割して対応しなかった理由を教えてください。
There was a problem hiding this comment.
1 度に入力できる利便性があり、自動入力を機能させるためです。
デザイン上は可能であれば分割しているようにしたいと思います。お待ちください。
| formatPostCode(postCode?.toString() || ''), | ||
| ); | ||
|
|
||
| const onInputValueChange = (inputValue: string) => { |
There was a problem hiding this comment.
前半の郵便番号を削除するとカーソルが末尾に移動する挙動になっていますが、期待通りの挙動でしょうか?
Kapture.2023-11-28.at.09.32.32.mp4
There was a problem hiding this comment.
意図通りではありませんね。
マスク化をしたいと考えておりますが、なかなかうまくいきません。
| }; | ||
|
|
||
| return ( | ||
| <SimulationForm |
There was a problem hiding this comment.
東京エリアで入力項目を全て入力後に契約容量を変更した時にメールアドレスの入力欄が表示されませんでした。本コンポーネントが状態・ロジックを持ちすぎているので、バグが生まれやすそうです。コンポーネントを分割できると、保守性・可読性も上がると思います。
There was a problem hiding this comment.
おっしゃる通り、複雑な状態を useState だけで管理しようとしているのはよくないですね。useReducer を使うように変更します。
…d_challenge_2/challenges/k-taro56/testing-library/jest-dom-6.2.0 Bump @testing-library/jest-dom from 6.1.6 to 6.2.0 in /frontend_challenge_2/challenges/k-taro56
Bumps [material-symbols](https://github.com/marella/material-symbols/tree/HEAD/material-symbols) from 0.14.3 to 0.14.4. - [Release notes](https://github.com/marella/material-symbols/releases) - [Commits](https://github.com/marella/material-symbols/commits/v0.14.4/material-symbols) --- updated-dependencies: - dependency-name: material-symbols dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com>
…d_challenge_2/challenges/k-taro56/material-symbols-0.14.4 Bump material-symbols from 0.14.3 to 0.14.4 in /frontend_challenge_2/challenges/k-taro56
Bumps [@types/react](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/react) from 18.2.46 to 18.2.47. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/react) --- updated-dependencies: - dependency-name: "@types/react" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com>
…d_challenge_2/challenges/k-taro56/types/react-18.2.47 Bump @types/react from 18.2.46 to 18.2.47 in /frontend_challenge_2/challenges/k-taro56
Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 20.10.6 to 20.10.7. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node) --- updated-dependencies: - dependency-name: "@types/node" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com>
…d_challenge_2/challenges/k-taro56/types/node-20.10.7 Bump @types/node from 20.10.6 to 20.10.7 in /frontend_challenge_2/challenges/k-taro56
Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 20.10.7 to 20.10.8. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node) --- updated-dependencies: - dependency-name: "@types/node" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com>
…d_challenge_2/challenges/k-taro56/types/node-20.10.8 Bump @types/node from 20.10.7 to 20.10.8 in /frontend_challenge_2/challenges/k-taro56
Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 20.10.8 to 20.11.0. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node) --- updated-dependencies: - dependency-name: "@types/node" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com>
…d_challenge_2/challenges/k-taro56/types/node-20.11.0 Bump @types/node from 20.10.8 to 20.11.0 in /frontend_challenge_2/challenges/k-taro56
Bumps [material-symbols](https://github.com/marella/material-symbols/tree/HEAD/material-symbols) from 0.14.4 to 0.14.5. - [Release notes](https://github.com/marella/material-symbols/releases) - [Commits](https://github.com/marella/material-symbols/commits/v0.14.5/material-symbols) --- updated-dependencies: - dependency-name: material-symbols dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com>
…d_challenge_2/challenges/k-taro56/material-symbols-0.14.5 Bump material-symbols from 0.14.4 to 0.14.5 in /frontend_challenge_2/challenges/k-taro56
Bumps [prettier](https://github.com/prettier/prettier) from 3.1.1 to 3.2.2. - [Release notes](https://github.com/prettier/prettier/releases) - [Changelog](https://github.com/prettier/prettier/blob/main/CHANGELOG.md) - [Commits](prettier/prettier@3.1.1...3.2.2) --- updated-dependencies: - dependency-name: prettier dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com>
…d_challenge_2/challenges/k-taro56/prettier-3.2.2 Bump prettier from 3.1.1 to 3.2.2 in /frontend_challenge_2/challenges/k-taro56
Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 20.11.0 to 20.11.3. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node) --- updated-dependencies: - dependency-name: "@types/node" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com>
…d_challenge_2/challenges/k-taro56/types/node-20.11.3 Bump @types/node from 20.11.0 to 20.11.3 in /frontend_challenge_2/challenges/k-taro56
Bumps [@types/react](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/react) from 18.2.47 to 18.2.48. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/react) --- updated-dependencies: - dependency-name: "@types/react" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com>
…d_challenge_2/challenges/k-taro56/types/react-18.2.48 Bump @types/react from 18.2.47 to 18.2.48 in /frontend_challenge_2/challenges/k-taro56
Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 20.11.3 to 20.11.4. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node) --- updated-dependencies: - dependency-name: "@types/node" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com>
…d_challenge_2/challenges/k-taro56/types/node-20.11.4 Bump @types/node from 20.11.3 to 20.11.4 in /frontend_challenge_2/challenges/k-taro56
Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 20.11.4 to 20.11.5. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node) --- updated-dependencies: - dependency-name: "@types/node" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com>
Bumps [actions/cache](https://github.com/actions/cache) from 3 to 4. - [Release notes](https://github.com/actions/cache/releases) - [Changelog](https://github.com/actions/cache/blob/main/RELEASES.md) - [Commits](actions/cache@v3...v4) --- updated-dependencies: - dependency-name: actions/cache dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com>
…ns/cache-4 Bump actions/cache from 3 to 4
…_2/challenges/k-taro56/types/node-20.11.5
…d_challenge_2/challenges/k-taro56/types/node-20.11.5 Bump @types/node from 20.11.4 to 20.11.5 in /frontend_challenge_2/challenges/k-taro56
Bumps [next](https://github.com/vercel/next.js) from 14.0.4 to 14.1.0. - [Release notes](https://github.com/vercel/next.js/releases) - [Changelog](https://github.com/vercel/next.js/blob/canary/release.js) - [Commits](vercel/next.js@v14.0.4...v14.1.0) --- updated-dependencies: - dependency-name: next dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com>
…d_challenge_2/challenges/k-taro56/types/node-20.14.11 chore(deps-dev): bump @types/node from 20.14.10 to 20.14.11 in /frontend_challenge_2/challenges/k-taro56
Bumps [husky](https://github.com/typicode/husky) from 9.0.11 to 9.1.1. - [Release notes](https://github.com/typicode/husky/releases) - [Commits](typicode/husky@v9.0.11...v9.1.1) --- updated-dependencies: - dependency-name: husky dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com>
…d_challenge_2/challenges/k-taro56/husky-9.1.1 chore(deps-dev): bump husky from 9.0.11 to 9.1.1 in /frontend_challenge_2/challenges/k-taro56
Bumps [@emotion/styled](https://github.com/emotion-js/emotion) from 11.11.5 to 11.13.0. - [Release notes](https://github.com/emotion-js/emotion/releases) - [Changelog](https://github.com/emotion-js/emotion/blob/main/CHANGELOG.md) - [Commits](https://github.com/emotion-js/emotion/compare/@emotion/styled@11.11.5...@emotion/styled@11.13.0) --- updated-dependencies: - dependency-name: "@emotion/styled" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com>
…d_challenge_2/challenges/k-taro56/emotion/styled-11.13.0 chore(deps-dev): bump @emotion/styled from 11.11.5 to 11.13.0 in /frontend_challenge_2/challenges/k-taro56
Bumps [husky](https://github.com/typicode/husky) from 9.1.1 to 9.1.2. - [Release notes](https://github.com/typicode/husky/releases) - [Commits](typicode/husky@v9.1.1...v9.1.2) --- updated-dependencies: - dependency-name: husky dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com>
…d_challenge_2/challenges/k-taro56/husky-9.1.2 chore(deps-dev): bump husky from 9.1.1 to 9.1.2 in /frontend_challenge_2/challenges/k-taro56
Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 20.14.11 to 20.14.12. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node) --- updated-dependencies: - dependency-name: "@types/node" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com>
…d_challenge_2/challenges/k-taro56/types/node-20.14.12 chore(deps-dev): bump @types/node from 20.14.11 to 20.14.12 in /frontend_challenge_2/challenges/k-taro56
Bumps [@testing-library/jest-dom](https://github.com/testing-library/jest-dom) from 6.4.6 to 6.4.7. - [Release notes](https://github.com/testing-library/jest-dom/releases) - [Changelog](https://github.com/testing-library/jest-dom/blob/main/CHANGELOG.md) - [Commits](testing-library/jest-dom@v6.4.6...v6.4.7) --- updated-dependencies: - dependency-name: "@testing-library/jest-dom" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com>
…d_challenge_2/challenges/k-taro56/testing-library/jest-dom-6.4.7 chore(deps-dev): bump @testing-library/jest-dom from 6.4.6 to 6.4.7 in /frontend_challenge_2/challenges/k-taro56
Bumps [typescript](https://github.com/Microsoft/TypeScript) from 5.5.3 to 5.5.4. - [Release notes](https://github.com/Microsoft/TypeScript/releases) - [Changelog](https://github.com/microsoft/TypeScript/blob/main/azure-pipelines.release.yml) - [Commits](microsoft/TypeScript@v5.5.3...v5.5.4) --- updated-dependencies: - dependency-name: typescript dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com>
…d_challenge_2/challenges/k-taro56/typescript-5.5.4 chore(deps-dev): bump typescript from 5.5.3 to 5.5.4 in /frontend_challenge_2/challenges/k-taro56
Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 20.14.12 to 22.0.0. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node) --- updated-dependencies: - dependency-name: "@types/node" dependency-type: direct:development update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com>
Bumps [husky](https://github.com/typicode/husky) from 9.1.2 to 9.1.4. - [Release notes](https://github.com/typicode/husky/releases) - [Commits](typicode/husky@v9.1.2...v9.1.4) --- updated-dependencies: - dependency-name: husky dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com>
…d_challenge_2/challenges/k-taro56/types/node-22.0.0 chore(deps-dev): bump @types/node from 20.14.12 to 22.0.0 in /frontend_challenge_2/challenges/k-taro56
…_2/challenges/k-taro56/husky-9.1.4
…d_challenge_2/challenges/k-taro56/husky-9.1.4 chore(deps-dev): bump husky from 9.1.2 to 9.1.4 in /frontend_challenge_2/challenges/k-taro56
Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 22.0.0 to 22.0.2. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node) --- updated-dependencies: - dependency-name: "@types/node" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com>
…d_challenge_2/challenges/k-taro56/types/node-22.0.2 chore(deps-dev): bump @types/node from 22.0.0 to 22.0.2 in /frontend_challenge_2/challenges/k-taro56
Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 22.0.2 to 22.1.0. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node) --- updated-dependencies: - dependency-name: "@types/node" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com>
…d_challenge_2/challenges/k-taro56/types/node-22.1.0 chore(deps-dev): bump @types/node from 22.0.2 to 22.1.0 in /frontend_challenge_2/challenges/k-taro56
Bumps [lint-staged](https://github.com/lint-staged/lint-staged) from 15.2.7 to 15.2.8. - [Release notes](https://github.com/lint-staged/lint-staged/releases) - [Changelog](https://github.com/lint-staged/lint-staged/blob/master/CHANGELOG.md) - [Commits](lint-staged/lint-staged@v15.2.7...v15.2.8) --- updated-dependencies: - dependency-name: lint-staged dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com>
…d_challenge_2/challenges/k-taro56/lint-staged-15.2.8 chore(deps-dev): bump lint-staged from 15.2.7 to 15.2.8 in /frontend_challenge_2/challenges/k-taro56
Bumps [material-symbols](https://github.com/marella/material-symbols/tree/HEAD/material-symbols) from 0.21.2 to 0.21.3. - [Release notes](https://github.com/marella/material-symbols/releases) - [Commits](https://github.com/marella/material-symbols/commits/v0.21.3/material-symbols) --- updated-dependencies: - dependency-name: material-symbols dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com>
…d_challenge_2/challenges/k-taro56/material-symbols-0.21.3 chore(deps): bump material-symbols from 0.21.2 to 0.21.3 in /frontend_challenge_2/challenges/k-taro56
Bumps [material-symbols](https://github.com/marella/material-symbols/tree/HEAD/material-symbols) from 0.21.3 to 0.22.0. - [Release notes](https://github.com/marella/material-symbols/releases) - [Commits](https://github.com/marella/material-symbols/commits/v0.22.0/material-symbols) --- updated-dependencies: - dependency-name: material-symbols dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com>
…d_challenge_2/challenges/k-taro56/material-symbols-0.22.0 chore(deps): bump material-symbols from 0.21.3 to 0.22.0 in /frontend_challenge_2/challenges/k-taro56
Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 22.1.0 to 22.5.1. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node) --- updated-dependencies: - dependency-name: "@types/node" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com>
…d_challenge_2/challenges/k-taro56/types/node-22.5.1 chore(deps-dev): bump @types/node from 22.1.0 to 22.5.1 in /frontend_challenge_2/challenges/k-taro56






コーディングチャレンジの実装ができましたので、ご確認お願いいたします。
概要
create-next-appを使用してプロジェクトのセットアップをしました。実装内容
追加の依存関係
デプロイ先
https://k-taro56.github.io/coding-challenge/